Como usar Lazy-load modules para evitar que se cargue toda la página al cargar la página inicial, y que se vaya cargando progresivamente a medida que navegadmos.
Página referencia Lazy-loading
Por defecto cuando creamos un proyecto de angular se utiliza un routing normal para los componentes, dentro del archivo app-routing.module.ts tenemos todas las rutas a los componentes a los que puede navegar nuetra aplicación, esto hace que tan pronto carguemos la página principal se carguen todos los componentes de la aplicación.
Ejemplo:
Para comprobar que todos los modulos se carga al abrir la página inicial podemos hacerlo con el inspector de chrome:
Al hacer click en el botón de "Menu" o "Users" podemos ver en la pestaña de Network que no se realiza ninguna petición, porque esos dos componentes ya están cargados.
Para hacer que los componentes se carguen progresivamente usaremos el Lazy-load.
Generamos un modulo que se cargará solo cuando se llame la ruta del mismo, y se cargarán todos los componentes que haya dentro de ese modulo.
Lo hacemos con el siguiente comando:
ng generate module lazy1 --route lazy1 --module app.module
Este comando añadirá la ruta del modulo en el app-routing.module.ts y generará la carpeta del modulo con un componente principal y su propio archivo de routing
app-routing.module.ts:
Si queremos podemos añadir un componente a mayores dentro del nuevo modulo
ng generate component lazy1/lazy2
La lista de archivos con todo generado queda asi:
Dentro del archivo de rutas de lazy1 (lazy1-routing.module.ts) tenemos que configurar la ruta para el componente lazy2
Tanto el componente lazy1 como el componente lazy2 se cargarán (ambos), cuando se acceda a uno de los dos, ya que están dentro del mismo modulo y se hace un lazy-load de ese modulo
Podemos comprobarlo desde el inspector de chrome:
Solo se hace una petición cuando pulsamos en "Lazy1" o "Lazy2", Y solo la primera vez, una vez cargado el modulo ya no se hacen mas peticiones.